<template>
    <!-- 底部带按钮的输入框 -->
    <van-action-sheet v-model="showComponent" class="custom-action">
        <div class="com-bottom-input-wrap">
            <div class="flex-wrap flex-middle">
                <input ref="bottomInput" id="inputField" type="text" class="input-field" :placeholder="placeholder" v-model="inputValue" />
				<span class="font-btn ml10 primary fs-16" @click="save">{{ confirmBtnName }}</span>
            </div>
            <div class="flex mt10"  v-if="isOpenAnonymity == 1">
                <van-checkbox-single v-model="isAnonymous" shape="square" /> <span class="fs-14 ml10">匿名</span>
            </div>
        </div>
    </van-action-sheet>
</template>

<script>
import { parse, stringify } from '@/assets/js/util'
import { mapGetters } from "vuex";
	import vanActionSheet from '@/components/vant/van-action-sheet/van-action-sheet.vue'
	import vanCheckboxSingle from '@/components/vant/van-checkbox-single/van-checkbox-single.vue'
export default {
	components:{
		vanActionSheet,
		vanCheckboxSingle
	},
    data() {
        return {
            inputValue: '',
            isAnonymous: false, // 是否匿名 提交时需要转换成：（1是 2否）
            showComponent: false
        }
    },

    props: {
        showAction: {
            type: Boolean,
            default: false
        },
        confirmBtnName: {
            type: String,
            default: '确定'
        },
        placeholder: { // 输入框占位符
            type: String,
            default: '请输入'
        },
        /* showAnonymous: { // 是否显示匿名
            type: Boolean,
            default: true,
        }, */
    },

    mounted() {
    },
    computed: {
    ...mapGetters({
        isOpenAnonymity: "siteInfo/isOpenAnonymity"
      })
    },

    methods: {
        save() {
            this.$emit('save', this.inputValue, this.isAnonymous ? 1 : 2)
        }
    },
    watch: {
       showAction(val) {
           this.showComponent = val
           if (!val) {
                this.inputValue = ''
                this.isAnonymous = false
           } 
       } ,
       showComponent(val) {
           if (!val) {
               this.$emit('hide')
           }
       }
    }
}
</script>

<style lang="scss" scoped>
    .custom-action {
        
        border-radius: 0;
        .com-bottom-input-wrap {
			padding: 15px;
            input {
                width: 85%;
            }
        }
    }
</style>
